<template>
  <div>
    <div class="top">
      <div class="top-l">
        <span>SOOC</span>
        <span>个人中心</span>
      </div>
      <div class="top-r">
        <div class="top-preview">
          <i class="icon iconfont icon-sanjiaoxing-right"></i>
          <span>预览</span>
        </div>
        <div class="top-complete">
          <i class="icon iconfont icon-yuangou"></i>
          <span>完成</span>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="content-l">
        <h3>目录</h3>
        <ul>
          <li class="content-list" v-for="(element,index) in myArray" :key="index">
            <div class="hand" style="height:35px" draggable='true' @dragstart='drag($event,index)' @drop='drop($event,index)' @dragenter='enterDrop($event)' @dragleave='leave()' @dragover='allowDrop($event)' @click='lail()'>
              <span class="content__number">{{index}}</span>
              <input type="text" class="content__name hand" onchange="this.readOnly=true" readonly ondblclick="this.readOnly=false" v-model="element.name">
            </div>

            <ul class="second">
              <li class="clear hand" v-for="(list,childrenIndex) in element.nav" :key="childrenIndex" draggable='true' @dragstart='dragSon($event,childrenIndex,index)' @dragover='allowDrop($event)' @drop='dropSon($event,index,childrenIndex)'>
                <span class="">{{index+1}}.{{index+1}}</span>
                <input type="text" class="hand" v-model="list.navv" onchange="this.readOnly=true" readonly ondblclick="this.readOnly=false">
              </li>
            </ul>

          </li>

        </ul>
      </div>
      <div class="content-c">
        <h3>PPT</h3>
        <div class="ppt">

        </div>
      </div>
      <div class="content-r">
        <h3>录音</h3>
        <div class="recording">
          <div class="recording-top">
            <span>name.mp3</span>
            <i class="icon iconfont icon-chacha"></i>
            <i class="icon iconfont icon-icon-"></i>
          </div>
          <audio src="../static/song.ogg" controls="controls" style="width:228px;padding-top:8px;"></audio>
        </div>
        <div class="recording-channel">
          <h3>录音配音上传途径如下</h3>
          <div class="channel-one">
            <p>
              <span>1. 本地音频文件上传</span>
              <a href="#">上传录音</a>
            </p>
            <p>支持MP3，WAV，WMA等格式的音频</p>
          </div>
          <div class="channel-two">
            <p>
              <span>2. 使用配音小秘书配音,</span>
              <a href="#">下载APP</a>
            </p>
            <img src="../assets/img/ewm1.png" alt="">
            <p>APP扫一扫上方二维码，即可配音上传</p>
          </div>
          <div class="channel-one">
            <p>
              <span>3. 文本自动配音</span>
              <a href="#">文本配音</a>
            </p>
            <p class="channel-line">点击添加文本描述配音的文字脚本，然后点击生成配音，会立即生成音频文件自动上传。</p>
          </div>
        </div>
      </div>
    </div>

    <!-- <draggable v-model="myArray" :options="{group:'people'}" @start="drag=true" @end="drag=false">
      <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
    </draggable> -->
    <div @click="lail">
      11111111111111
      <input type="text">
    </div>

  </div>
</template>
<script>
// import draggable from 'vuedraggable';
import  drag from "@/common/drag.js";
export default{
  mixins:[drag],
}
</script>
<style lang="scss" scoped>
@import '../assets/css/edit.scss';
</style>
